<template>
  <view class="user_ai_box">
    <view class="ai_list_box" v-if="aiDataList.length > 0">
      <scroll-view
        class="scroll_view"
        :scroll-y="scroll"
        upper-threshold="0"
        :refresher-enabled="false"
        refresher-default-style="white"
        @scrolltoupper="refresherrefresh"
        lower-threshold="80"
        @scrolltolower="getHistoriList"
      >
        <template v-for="(item, index) in aiDataList">
          <view class="single_data box" :key="index">
            <!-- <view class="user_type_box box"
							v-if="(userType==2||userType==3) &&(item.managerShopName||item.guideName)">
							<text v-if="item.managerShopName || item.guideName">导购：</text>
							<text v-if="userType==3 &&item.managerShopName">{{item.managerShopName}}</text>
							<text v-if="item.guideName">{{item.guideName}}</text>
						</view> -->
            <view class="width_32 height_32 br_16 mr_12 avatar_box">
              <image
                :src="
                  item.avatar
                    ? item.avatar
                    : '../../static/images/avatar_empty.png'
                "
                mode=""
                class="user_avatar"
              ></image>
            </view>
            <view class="single_content box">
				<view class="new_name_box">
              <view class="new_name fz_14 fc_333 fb">{{ item.name }}</view>
              <view class="new_date_box ml_8 fz_12 fc_999">{{
                item.timeStr
              }}</view>
            </view>
              <!-- <view class="name_box">
                <text class="user_name fz_14 fc_333 fb">{{ item.name }}</text>
                <text class="ml_8 fz_12 fc_999">{{ item.timeStr }}</text>
              </view> -->
              <view class="check_box box mt_6 mb_4">
                <text class="check_type">
                  {{
                    item.type == 1
                      ? "购买商品"
                      : item.type == 2
                      ? "加入购物车"
                      : item.type == 3
                      ? "收藏商品"
                      : item.type == 4
                      ? "分享商品"
                      : item.type == 5
                      ? "浏览商品"
                      : item.type == 6
                      ? "邀请用户"
                      : ""
                  }}
                </text>
                <text class="goods_name ml_8 fb">{{ item.content }}</text>
                <text v-if="item.type == 6" class="ml_5">注册成功</text>
              </view>
              <view
                class="fz_12 fc_333"
                v-if="item.type == 4 || item.type == 5"
              >
                已{{ item.type == 4 ? "分享" : "浏览" }}过{{
                  item.lookTimes || 0
                }}次
              </view>
              <view
                class="user_type_box box"
                v-if="
                  (userType == 2 || userType == 3) &&
                  (item.managerShopName || item.guideName)
                "
              >
                <text v-if="item.managerShopName || item.guideName"
                  >导购：</text
                >
                <text v-if="userType == 3 && item.managerShopName">{{
                  item.managerShopName
                }}</text>
                <text v-if="item.guideName">{{ item.guideName }}</text>
              </view>
            </view>
          </view>
        </template>
      </scroll-view>
    </view>
    <view class="" v-else>
      <Empty />
    </view>
  </view>
</template>

<script>
import Empty from "./merchant/components/empty.vue";
import api from "@/service/config/api";
import { mapState } from "vuex";
export default {
  components: {
    Empty,
  },
  data() {
    return {
      scroll: true,
      aiDataList: [],
      startTime: "",
      current: 1,
      size: 20,
      tenantId: uni.getStorageSync("tenantId"),
    };
  },
  computed: {
    ...mapState(["userType"]),
  },
  onShow() {
    this.startTime = new Date();
    this.getHistoriList();
  },
  methods: {
    minutesBetweenDates(date1, date2) {
      const oneMinute = 60 * 1000; // 1分钟的毫秒数
      const diff = Math.abs(date2.getTime() - date1.getTime()); // 计算时间差
      return Math.floor(diff / oneMinute); // 转换为分钟
    },
    // 下拉刷新
    refresherrefresh() {
      console.log("下拉刷新");
      this.current = 1;
      this.startTime = new Date();
      this.getHistoriList();
    },
    // 获取历史数据列表
    getHistoriList() {
      const startTime = this.$moment(this.startTime).format(
        "YYYY-MM-DD HH:mm:ss"
      );
      this.startTime = startTime;
      const basicUserInfo = uni.getStorageSync("basicUnserInfo");
      api
        .post("/user/api/radar/aiPageData", {
          consumerIds: basicUserInfo.consumerIds,
          tenantId: this.tenantId,
          size: this.size,
          current: this.current,
          startTime: startTime,
        })
        .then((res) => {
          if (this.current == 1) {
            this.aiDataList = [];
          }
          if (this.aiDataList.length < res.data.total) {
            res.data.records.map((item) => {
              if (
                new Date().getTime() - new Date(item.createTime).getTime() <=
                60000 * 3
              ) {
                item.timeStr = "刚刚";
              } else if (
                new Date().getTime() - new Date(item.createTime).getTime() <
                60000 * 60
              ) {
                const minutes = this.minutesBetweenDates(
                  new Date(item.createTime),
                  new Date()
                );
                item.timeStr = `${minutes}分钟前`;
              } else {
                item.timeStr = item.createTime;
              }
            });
            this.aiDataList = this.aiDataList.concat(res.data.records);

            this.current++;
          } else {
            uni.$u.toast("已加载全部数据");
          }

          console.log("数据请求");
          console.log(res);
          console.log(this.aiDataList);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.user_ai_box {
  padding: 16rpx 0rpx;
  height: 100vh;

  .ai_list_box {
    background: #ffffff;
    height: 100vh;

    .scroll_view {
      height: 100%;
    }

    .single_data {
      @include set_padding(12rpx, 12rpx);
      @include flex_box(row, nowrap, flex-start, flex-start);
      border-bottom: 2rpx solid rgba(0, 0, 0, 0.1);
      position: relative;

      .name_box {
        height: 50rpx;
        @include flex_box(row, nowrap, flex-start, center);
      }
      .avatar_box {
        overflow: hidden;
      }

      .user_name {
        display: inline-block;
        max-width: 240rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
	  .new_name_box {
      @include flex_box(row, nowrap, space-between, center);
      .new_name {
        height: 50rpx;
        display: inline-block;
        // width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: #333333;
        font-weight: 500;
        font-size: 28rpx;
      }
      .new_date_box {
        height: 50rpx;
        width: 280rpx;
        text-align: right;
      }
    }

      .user_type_box {
        padding: 0 12rpx;
        // position: absolute;
        // right: 24rpx;
        // top: 24rpx;
        height: 50rpx;
        border: 1rpx solid #999999;
        // max-width: 100%;
        // width:auto;
        font-size: 24rpx;
        color: #333333;
        line-height: 50rpx;
        border-radius: 56rpx;
        // overflow: hidden;
        // text-overflow: ellipsis;
        // white-space: nowrap;
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-top: 20rpx;
        display: inline-block;
      }

      .user_avatar {
        display: block;
        width: 100%;
        height: 100%;
        margin: 0;
      }

      .single_content {
        width: calc(100% - 88rpx);

        .check_box {
          // @include flex_box(row, nowrap, flex-start, flex-start);

          .check_type {
            word-break: normal;
            white-space: nowrap;
          }
        }

        .goods_name {
          // text-overflow: ellipsis;
          // white-space: nowrap;
          // overflow: hidden;
        }
      }
    }
  }
}
</style>
